<template>
  <div>
    <h1>App 根组件</h1>
    <hr />

    <!-- 使用自定义组件 -->
    <!-- <my-test>
        <template v-slot:default="scope">
            <p>{{ scope }}</p>
            <p>{{ scope.info.phone }}</p>
            <p>{{ scope.info.address }}</p>
            <p>{{ scope.msg }}</p>
        </template>
    </my-test> -->

    <!-- 解构作用域插槽 -->
     <my-test>
        <template #default="{ info,msg }">
            <p>{{ info.phone }}</p>
            <p>{{ info.address }}</p>
            <p>{{ msg }}</p>
        </template>
    </my-test>

    <hr />

    <!-- 插槽的应用场景:在使用 MyTable 组件时，自定义单元格的渲染方式，并接收作用域插槽对外提供的数据 -->
    <my-table>
      <template #default="{ user }" >
          <td>{{ user.id }}</td>
          <td>{{ user.name }}</td>
          <td>
            <input type="checkbox" :checked="user.state" />
          </td>
      </template>
    </my-table>
  </div>
</template>

<script>
import MyTest from './components/MyTest.vue'
import MyTable from './components/MyTable.vue'
export default {
  components:{
    MyTest,
    MyTable
  }
}
</script>

<style lang="less" scoped >

</style>